<!--统计分析~ ~ ~ 折线统计图：1.课程点赞2.商品点赞-->
<template>
    <div id="sa">
        <el-card class="box1">
            <div slot="header" class="clearfix">
                <span style="float: left; padding: 3px 0;">课程和商品统计</span>
            </div>
            <div class="text item">
              <div id="main" style="width: 100%;height: 520px;background:#fff"></div>
            </div>
        </el-card>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        name:"tongJiTu",
        created(){
            this.getAllEcharts();
        },
        data(){
            return{
                // charts:'',
                xingQi:[],
                sac:[],
                sap:[],
            }
        },
        methods: {
            async getAllEcharts() {
                const {data: res1} = await this.$http.get("echarts");
                console.log(res1);
                this.xingQi = res1.xingQi;
                this.sac = res1.sac;
                this.sap = res1.sap;
                this.setChart();
            },
            setChart() {
                //基于准备好的dom，初始化echarts实例
                this.chart = echarts.init(document.getElementById('main'))
                var option = {
                    //标题组件
                    title: {
                        left: '3%',
                        top: '5%',
                        text: "近一周课程和商品统计",//标题
                    },
                    //提示框组件
                    tooltip: {
                        trigger: 'axis'
                    },
                    //图例组件
                    legend: {
                        align: 'right',//文字在前，图标在后
                        left: '3%',
                        top: '15%',
                        name: ['近一周课程统计', '近一周商品统计']
                    },
                    //可用于调整图例在整个容器中的占位
                    grid: {
                        top: '30%',
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    //图表的工具栏
                    toolbox: {
                        feature: {
                            saveAsImage: {} //保存为图片
                        }
                    },
                    //X轴
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisTick: {
                            alignWithLabel: true  //保证刻度线和标签对齐
                        },
                        //横轴坐标值
                        data: this.xingQi,
                        name: '星期'
                    },
                    //Y轴
                    yAxis: {
                        name: '总数',
                        type: 'value',
                        boundaryGap: true,
                        splitNumber: 6,  //纵坐标数
                        interval: 50 //强制设置坐标轴分割间隔
                    },
                    //折线
                    series: [{
                        name: '课程',
                        type: 'line',//折线图line
                        /*stack:'总量',*/
                        itemStyle: {
                            color: 'rgb(132,211,248)',//改变折线点的颜色
                            lineStyle: {
                                color: 'rgb(132,211,248)'//改变折线颜色
                            }
                        },
                        data: this.sac
                    }, {
                        name: '商品',
                        type: 'line',//折线图line
                        stack: '总量',
                        itemStyle: {
                            color: 'rgb(7,129,216)',//改变折线点的颜色
                            lineStyle: {
                              color: 'rgb(7,129,216)'//改变折线颜色
                            }
                        },
                        data: this.sap
                    }],
                }
                this.chart.setOption(option);
            },
            mounted() {
                this.$nextTick(function () {
                  this.drawLine("main")
                })
            }
        }
           /* //折线图
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    //标题组件
                    title:{
                        left:'3%',
                        top:'5%',
                        text:"近一周课程和商品统计",//标题
                    },
                    //提示框组件
                    tooltip:{
                        trigger:'axis'
                    },
                    //图例组件
                    legend:{
                        align:'right',//文字在前，图标在后
                        left:'3%',
                        top:'15%',
                        name:['近一周课程统计','近一周商品统计']
                    },
                    //可用于调整图例在整个容器中的占位
                    grid:{
                        top:'30%',
                        left:'5%',
                        right:'5%',
                        bottom:'5%',
                        containLabel:true
                    },
                    //图表的工具栏
                    toolbox:{
                        feature:{
                            saveAsImage: {} //保存为图片
                        }
                    },
                    //X轴
                    xAxis:{
                        type:'category',
                        boundaryGap:true,
                        axisTick:{
                            alignWithLabel: true  //保证刻度线和标签对齐
                        },
                        //横轴坐标值
                        data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
                        name:'星期'
                    },
                    //Y轴
                    yAxis:{
                        name:'总数',
                        type:'value',
                        boundaryGap:true,
                        splitNumber:6,  //纵坐标数
                        interval:50 //强制设置坐标轴分割间隔
                    },
                    //折线
                    series:[{
                        name:'课程',
                        type:'line',//折线图line
                        /!*stack:'总量',*!/
                        itemStyle:{
                            color:'rgb(132,211,248)',//改变折线点的颜色
                            lineStyle:{
                                color: 'rgb(132,211,248)'//改变折线颜色
                            }
                        },
                        data:this.opinionDataC
                    },{
                        name:'商品',
                        type:'line',//折线图line
                        stack:'总量',
                        itemStyle:{
                            color:'rgb(7,129,216)',//改变折线点的颜色
                            lineStyle:{
                                color: 'rgb(7,129,216)'//改变折线颜色
                            }
                        },
                        data:this.opinionDataP
                    }]
                })
            }
        },
        //调用
        mounted() {
            this.$nextTick(function (){
                this.drawLine('main')
            })
        },
        created() {
            this.as();
        }*/
    }
</script>
<style scoped>
    #sa {
      width: 1500px;
      height: 100%;
    }
    a{
      text-decoration: none;
      color: #1b0528;
    }
    .box1{
      margin: 0px 0px 30px 0px;
    }
    .clearfix:before,
    .clearfix:after{
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
</style>